import { createElement, render, renderDOM } from './vDom';
import domDiff from './domDiff';
import doPatch from './doPatch';

const vDom = createElement("ul",
  {
    class: "red",
    style: "background: blue,font-size: 20px"
  }, [createElement("li", {
    class: "green"
  }, [createElement("a", {
    href: "#"
  }, [createElement("span", {
    class: "active"
  }, ["首页"])])]),
  createElement("li", {
    class: "green"
  }, [createElement("a", {
    href: "#"
  }, [createElement("span", null, ["分类"])])]), createElement("li", {
    class: "green"
  }, [createElement("a", {
    href: "#"
  }, [createElement("span", null, ["购物车"])])]), createElement("li", {
    class: "green"
  }, [createElement("a", {
    href: "#"
  }, [createElement("span", null, [createElement('input', {
    value: '123',
  })])])])]);

const newVDom = createElement("ul",
  {
    class: "red",
    style: "background: red,font-size: 20px"
  }, [createElement("li", {
    class: "green"
  }, [createElement("a", {
    href: "#"
  }, [createElement("span", {
    class: "active"
  }, ["首页"])])]),
  createElement("li", {
    class: "green"
  }, [createElement("a", {
    href: "#"
  }, [createElement("span", null, ["我的"])])]), createElement("li", {
    class: "green blue active"
  }, [createElement("a", {
    href: "#"
  }, [createElement("div", null, ["购物车11"])])]), createElement("li", {
    class: "green"
  }, [createElement("a", {
    href: "#",
    class:'a'
  }, [createElement("span", null,['哈哈哈111'])])])]);

const rDom = render(vDom);
renderDOM(rDom, document.getElementById('app'));

const patches = domDiff(vDom,newVDom);  // 对比之后的补丁包

window.onclick=function(){
doPatch(rDom,patches); // 将补丁打到真实dom

}

console.log(patches, '-----------------');